<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>修改</title>

    <!-- CSS -->
    <link rel="stylesheet" href="../../static/plugins/layui/css/layui.css" th:href="@{plugins/layui/css/layui.css}"/>
    <link rel="stylesheet" href="../../static/mycss/common.css" th:href="@{mycss/main.css}"/>

</head>
<body>
<input type="hidden" name="uuid"/>
<div>
    <div style="margin:10px;">
        <form class="layui-form" id="formId">
            <div class="layui-form-item">
                <blockquote class="layui-elem-quote">
                    <div class="layui-inline">
                        <button class="layui-btn" id="demoSave" lay-submit="" lay-filter="*">保存</button>
                    </div>
                    <div class="layui-inline">
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-form-mid layui-word-aux"> <span style="color: red"> （注：如果编号为空，则会自动生成编号）</span></div>
                    </div>
                </blockquote>
            </div>
            <div style="display: none">
                <input name="uuid" id="uuid"/>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="name" lay-verify="required" placeholder=""/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">编号</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="number" placeholder=""/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">登录名</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="loginName" lay-verify="required" placeholder=""/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-inline">
                        <input type="hidden" class="layui-input" name="password" readonly placeholder="默认密码为：111111"/>
                        <input type="text" class="layui-input" readonly placeholder="******"/>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- JS -->
<script type="text/javascript" src="../../static/plugins/layui/layui.js" th:src="@{plugins/layui/layui.js}"></script>
<script>
    layui.use(['form', 'laydate', 'layer', 'upload'], function () {
        var $ = layui.$;
        var form = layui.form;
        var layer = layui.layer;

        /**
         * 表单提交 监听
         */
        form.on('submit(*)', function (data) {
            var subInfo;//提交信息
            //表单验证
            if(1!=1){
                layer.msg('提示信息',{icon:5,time:1000});
                return false;
            }else {
                subInfo = JSON.stringify(data.field);
                //提交
                $.ajax({
                    url: 'landerUpdate',
                    type: 'post',
                    data: {subInfo: subInfo},
                    dataType: 'text',//服务器返回的数据类型。
                    success: function (result) {
                        //保存后关闭当前弹出层:1.得到当前iframe层的索引;2.再执行关闭
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                        parent.layer.msg("保存成功", {icon: 1, time: 1500});
                    },
                    error: function (e) {
                        layer.msg("出现异常", {icon: 5, time: 1000});
                    }
                });
            }
            //注：此处必须有这个，因为这里我用了自己的ajax来提交表单，如果不return false，form监听程序本身也会触发提交，可能会出现莫名奇妙的错误
            return false;
        });

        /**
         * 根据 uuid 去后台 取数据，并填充表单
         */
        $.ajax({
            url:'getUpdateLander',
            type: 'post',
            data:{uuid:$('#uuid').val()},
            dataType:'json',//服务器返回的数据类型。
            success: function(data) {
                //填充表单
                $('#formId').populateForm(data);
                //渲染表单
                form.render();
            },
            error:function(response){
                layer.msg("获取数据失败",{icon:5,time:1000});
            }
        });
        $.fn.populateForm = function(data){
            return this.each(function(){
                var formElem, name;
                if(data == null){this.reset(); return; }
                for(var i = 0; i < this.length; i++){
                    formElem = this.elements[i];
                    //checkbox的name可能是name[]数组形式
                    name = (formElem.type == "checkbox")? formElem.name.replace(/(.+)\[\]$/, "$1") : formElem.name;
                    if(data[name] == undefined) continue;
                    switch(formElem.type){
                        case "checkbox":
                            if(data[name] == ""){
                                formElem.checked = false;
                            }else{
                                //数组查找元素
                                if(data[name].indexOf(formElem.value) > -1){
                                    formElem.checked = true;
                                }else{
                                    formElem.checked = false;
                                }
                            }
                            break;
                        case "radio":
                            if(data[name] == ""){
                                formElem.checked = false;
                            }else if(formElem.value == data[name]){
                                formElem.checked = true;
                            }
                            break;
                        case "button": break;
                        default: formElem.value = data[name];
                    }
                }
            });
        };

    });
</script>

</body>
</html>